<template>

  <div>

    <el-table
      :data="tableData"
      style="width: 100%">

      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>

      <el-table-column
        prop="phone"
        label="手机号"
        width="180">
      </el-table-column>


      <el-table-column
        prop="address"
        label="状态">
      </el-table-column>
    </el-table>

  </div>


  </el-form>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      default: () => ({})
    }
  },
  watch:{
    user: {
      handler: function(value) {
        console.log(value)
        this.formData.id=value.id||'';
        this.formData.name=value.name||'';
        this.formData.phone=value.phone||'';
      },
      immediate: true,
      deep: false
    }
  },
  data(){
    return {
      visible:false,
      title:'',
      loading:false,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      formData: {
        id: '',
        name: '',
        phone: '',
        oldPassword:'',
        newPassword:'',
        againPassword:'',
      },
      rules: {
        name: [{
          required: true,
          message: '请输入名字.',
          trigger: 'blur'
        },
        {
          min: 1,
          max: 50,
          message: '长度在 1 到 50 个字符',
          trigger: 'blur'
        }
        ],
        phone: [{
          required: true,
          message: '请输入手机号码.',
          trigger: 'blur'
        },
        {
          min: 11,
          max: 11,
          message: '手机号码有误.',
          trigger: 'blur'
        }
        ],
      }
    }
  },
  methods: {
    submit() {
      this.$message({
        message: 'User information has been updated successfully',
        type: 'success',
        duration: 5 * 1000
      })
    }
  }
}
</script>
